<!--  -->
<template>
  <section>
    <el-form ref="form" class="form" :inline="true" :model="formInline" :label-width="labelWidth" :size="size" @submit.native.prevent>
      <div>
        <el-form-item v-for="(item,index) in searchForm" :key="index" :label="item.label">
          <!-- 输入 -->
          <el-input v-if="item.type === 'Input'" v-model="formInline[item.prop]" maxlength="200" clearable :placeholder="item.placeholder" />
          <!-- 下拉 -->
          <el-select v-if="item.type ==='Select'" v-model="formInline[item.prop]" :size="item.size||size" :placeholder="item.placeholder" clearable filterable @change="item.change && item.change(formInline[item.prop])">
            <el-option v-for="(op,indexOp) in item.options" :key="indexOp" :label="item.noProps?op:item.props?op[item.props.label]:op.label" :value="item.noProps?op:item.props?op[item.props.value]:op.value" />
          </el-select>
          <!-- 时间日期 -->
          <el-date-picker
            v-if="item.type ==='datetimerange'"
            v-model="formInline[item.prop]"
            :style="item.style||{}"
            :size="item.size||size"
            value-format="YYYY-MM-DD HH:mm:ss"
            :type="item.props.type||'datetimerange'"
            :shortcuts="pickerOptions.shortcuts"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="item.change && item.change(formInline[item.prop])"
          />
          <!-- 联级-->
          <el-cascader
            v-if="item.type ==='cascader'"
            v-model="formInline[item.prop]"
            :options="item.options"
            :clearable="item.clearable||false"
            :props="item.props"
            :show-all-levels="false"
            :placeholder="item.placeholder"
            @change="item.change && item.change(formInline[item.prop])"
          />
          <!-- 带建议 -->
          <el-autocomplete
            v-if="item.type ==='autocomplete'"
            v-model="formInline[item.prop]"
            :highlight-first-item="true"
            class="inline-input"
            clearable
            :fetch-suggestions="item.querySearch"
            :placeholder="item.placeholder"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-for="(item,index) in searchHandle" v-show="!(item.isHide && item.isHide(item))" :key="index" :size="item.size||size" :type="item.type" @click="item.handle && item.handle(formInline)">
            <i v-if="item.icon&&item.icon.indexOf('iconfont')>-1" :class="item.icon" />
            <el-icon v-else>
              <component :is="item.icon"></component>
            </el-icon>
            {{ item.label }}
          </el-button>
        </el-form-item>
      </div>
      <div v-if="searchHandleRight.length>0">
        <el-form-item>
          <el-button v-for="(item,index) in searchHandleRight" v-show="!(item.isHide && item.isHide(item))" :key="index" :disabled="item.isDisabled" :size="size" :style="{display:!item.isHide?'inline-block':'none'}" :type="item.type" @click="item.handle && item.handle(formInline)">
            <i v-if="item.icon&&item.icon.indexOf('iconfont')>-1" :class="item.icon" />
            <el-icon v-else style="margin-right:5px">
              <component :is="item.icon"></component>
            </el-icon>
            {{ item.label }}
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </section>
</template>

<script>
import { Plus } from '@element-plus/icons'
export default {
  components: {
     Plus
  },
  props: {
    size: { type: String, default: '' },
    labelWidth: { type: String, default: '120px' },
    searchForm: { type: Array, default: () => [] },
    searchHandle: { type: Array, default: () => [] },
    searchHandleRight: { type: Array, default: () => [] },
    formInline: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: '最近一个月',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          },
          {
            text: '最近三个月',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            }
          }
        ]
      }
    }
  },

  methods: {}
}
</script>
<style lang='scss' scoped>
.iconfont {
  font-size: 14px;
}
.form {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-bottom: 1px solid #E9E9E9;
  padding: 0 32px;
  div:last-of-type{
    .el-form--inline .el-form-item:last-of-type{
        margin-right: 0;
      }
  }
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 24px;
}
.iconfont{font-size: 12px;margin-right: 5px;}
</style>
